<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-19 09:47:56
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-20 16:33:22
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\billing\index.vue
 * @Description: 收款
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <edit-financial-dialog ref="editFinancialRef" @success="editSuccess" />
  <split-dialog ref="splitRef" @success="editSuccess" />
  <image-view-dialog ref="imageViewRef" />
</template>
<script setup lang="ts">
import { computed, ref, reactive, defineAsyncComponent } from 'vue'
import { ElButton, ElMessageBox, ElDivider, ElMessage } from 'element-plus'
import { Delete, Plus } from '@element-plus/icons-vue'
import { collectionManagerList, collectionManagerRemove, invoicing } from '@/api/finance/receiverManange'
import { DictDirection } from '@/store/modules/dicts'
import { parseTime } from '@/utils'

const EditFinancialDialog = defineAsyncComponent(() => import('./components/EditFinancialDialog.vue'))
const SplitDialog = defineAsyncComponent(() => import('./components/SplitDialog.vue'))

const editFinancialRef = ref(null)
const splitRef = ref(null)
const imageViewRef = ref(null)
const customContainerRef = ref(null)

const multipleSelection = ref([])
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  afterCurrency: undefined,
  exchangeRate: undefined,
  startDate: undefined,
  endDate: undefined,
  remark: undefined,
})
const editSuccess = () => {
  customContainerRef.value.getList()
}
const deleteLoading = ref(false)
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            option: {
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            label: '账单编号',
            prop: 'serialNo',
          },
          {
            type: 'select',
            label: '状态',
            prop: 'cashierConfirmation',
            option: {
              dictInfo: { dict: DictDirection.账单状态 },
            },
          },
          {
            label: '收款账号',
            prop: 'receivingAccount',
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [
        {
          title: '新增',
          type: 'primary',
          icon: Plus,
          onClick: (e) => {
            editFinancialRef.value.open('新增')
          },
        },
        {
          title: '删除',
          type: 'danger',
          icon: Delete,
          disabled: !multipleSelection.value.length,
          loading: deleteLoading.value,
          onClick: (e) => {
            ElMessageBox.confirm('此操作将永久删除选中项, 是否继续?', '警告', {
              type: 'warning',
            }).then(() => {
              const ids = multipleSelection.value.map(i => i.id).join(',')
              deleteLoading.value = true
              collectionManagerRemove(ids).then(({ code }) => {
                if (code === 200) {
                  ElMessage.success('删除成功！')
                  customContainerRef.value.getList()
                }
              }).finally(() => {
                deleteLoading.value = false
              })
            })
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '收款日期',
            align: 'center',
            prop: 'receivingDate',
            formatter(row) {
              return parseTime(new Date(row.receivingDate))
            },
          },
          { label: '账单编号', align: 'center', prop: 'serialNo' },
          { label: '客户名称',
            align: 'center',
            prop: 'customerCode',
            autoFormatter: {
              dict: DictDirection.客户,
              rowKey: 'customerCode',
            } },
          { label: '转入方名称', align: 'center', prop: 'transfereeAccountName' },
          { label: '收款账号', align: 'center', prop: 'receivingAccount' },
          { label: '币种',
            align: 'center',
            prop: 'currency',
            autoFormatter: {
              dict: DictDirection.币种,
              rowKey: 'currency',
            },
          },
          { label: '收款金额', align: 'center', prop: 'exchangeRateAmount' },
          { label: '汇率', align: 'center', prop: 'exchangeRate' },
          { label: '汇率金额', align: 'center', prop: 'paymentAmount' },
          { label: '是否开票', align: 'center', prop: 'billing' },
          { label: '收款备注', align: 'center', prop: 'receivingRemarks' },
          {
            label: '操作',
            align: 'center',
            width: '350',
            fixed: 'right',
            render(h, { row }) {
              const el = [
                h(
                  ElButton,
                  { 
                    text: true,
                    disabled: row.dis,
                    type: 'primary',
                    onClick: () => {
                      editFinancialRef.value.open('修改', row)
                    },
                  },
                  {
                    default: () => '修改',
                  },
                ),
                h(
                  ElDivider,
                  {
                    direction: 'vertical',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    loading: !!row.btnLoading,
                    type: 'primary',
                    onClick: () => {
                      ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '警告', {
                        type: 'warning',
                      }).then(() => {
                        row.btnLoading = true
                        collectionManagerRemove(row.id).then(({ code }) => {
                          if (code === 200) {
                            ElMessage.success('删除成功！')
                            customContainerRef.value.getList()
                          }
                        }).finally(() => {
                          row.btnLoading = false
                        })
                      })
                    },
                  },
                  {
                    default: () => '删除',
                  },
                ),
                h(
                  ElDivider,
                  {
                    direction: 'vertical',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    loading: !!row.invoiceLoading,
                    onClick: () => {
                      ElMessageBox.confirm('敏感操作，是否继续？', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                      }).then(() => {
                        row.invoiceLoading = true
                        invoicing({ ...row,
                          billing: '0',
                        }).then(({ code }) => {
                          if (code === 200) {
                            ElMessage.success('开票成功！')
                          }
                        }).finally(() => {
                          row.invoiceLoading = false
                        })
                      })
                    },
                  },
                  {
                    default: () => '开票',
                  },
                ), 
                h(
                  ElDivider,
                  {
                    direction: 'vertical',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      imageViewRef.value.open(row.collectionImg)
                    },
                  },
                  {
                    default: () => '查看图片',
                  },
                )]

              if (!row.serialNo) {
                el.splice(el.length - 2, 0,  
                  h(
                    ElButton,
                    {
                      text: true,
                      type: 'primary',
                      onClick: () => {
                        splitRef.value.open(row)
                      },
                    },
                    {
                      default: () => '拆分',
                    },
                  ),
                  h(
                    ElDivider,
                    {
                      direction: 'vertical',
                    },
                  ))
              }

              return el
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: collectionManagerList,
    }
  },
  set(val) {
    return val
  },
})

</script>